<template>
  <div>
    <el-input
        v-model="inputValue"
        placeholder="请输入坐标"
        :style="locationStyle"
        :readonly="isReadonly"
    >
      <template slot="suffix">
        <el-popover
            placement="right"
            title="坐标设置"
            width="350"
            trigger="click"
            v-model="showPopover"
        >
          <template #default="content">
            <el-form
                :model="locationForm"
                :rules="locationRules"
                ref="locationForm"
            >
              <el-form-item label="纬度（-90-90 必填）" prop="latitude">
                <el-input
                    v-model="locationForm.latitude"
                    placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="经度（-180-180 必填）" prop="longitude">
                <el-input
                    v-model="locationForm.longitude"
                    placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="海拔" prop="elevation">
                <el-input
                    v-model="locationForm.elevation"
                    placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-form>
            <div style="margin-top: 20px">单位</div>
            <div>WGS84</div>
            <div style="text-align: right">
              <el-button  type="primary" @click="handleSetLocation"
              >设置
              </el-button
              >
              <el-button  @click="handleCancelLocation"
              >取消
              </el-button
              >
            </div>
          </template>
          <template #reference>
            <i
                class="el-input__icon el-icon-edit"
                style="cursor: pointer"
                @click="handleOpenLocationForm"
            ></i>
          </template>

        </el-popover>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "locationValue",
  model: {
    prop: "location",
    event: "locationValueChange",
  },
  props: {
    location: {
      type: Object,
      default: () => {
        return {
          latitude: "0",
          longitude: "0",
          elevation: "0",
        };
      },
    },
    locationStyle: {
      type: Object,
      default: () => {
        return {width: "100%"};
      },
    },
    isReadonly: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    const latitudeValidator = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入数值"));
      } else {
        let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
        if (!reg.test(val)) {
          callback(new Error("请输入数值"));
        } else {
          if (rule.field === "latitude") {
            if (val > 90 || val < -90) callback(new Error("数值在-90~90之间"));
          } else if (rule.field === "longitude") {
            if (val > 180 || val < -180)
              callback(new Error("数值在-180~180之间"));
          }
          callback();
        }
      }
    };
    const elevationValidator = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入数值"));
      } else {
        let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
        if (!reg.test(val)) {
          callback(new Error("请输入数值"));
        } else {
          callback();
        }
      }
    };
    return {
      showPopover: false,
      locationForm: this.location,
      inputValue: "",
      locationRules: {
        latitude: [
          {required: true, validator: latitudeValidator, trigger: "blur"},
        ],
        longitude: [
          {required: true, validator: latitudeValidator, trigger: "blur"},
        ],
        elevation: [
          {required: true, validator: elevationValidator, trigger: "blur"},
        ],
      },
    };
  },
  watch: {
    inputValue(newV, oldV) {
      this.$emit("locationValueChange", this.locationForm);
    },
    location: {
      deep: true,
      handler(newV) {
        this.locationForm = this.location;
        // this.setInputValue();
      },
    },
  },
  created() {
    this.setInputValue();
  },
  methods: {
    setInputValue() {
      this.inputValue =
          this.locationForm.latitude +
          "," +
          this.locationForm.longitude +
          "," +
          this.locationForm.elevation;
    },
    handleSetLocation() {
      this.$refs["locationForm"].validate((valid) => {
        if (valid) {
          this.setInputValue();
          this.showPopover = false;
        }
      });
    },
    handleCancelLocation() {
      this.locationForm = {};
      this.showPopover = false;
    },
    handleOpenLocationForm() {
      // const s = this.inputValue.split(",");
      // s[0] && this.$set(this.locationForm, "latitude", s[0].trim());
      // s[1] && this.$set(this.locationForm, "longitude", s[1].trim());
      // s[2] && this.$set(this.locationForm, "elevation", s[2].trim());
    },
  },
};
</script>

<style scoped>
.ep-form-item {
  margin-bottom: 6px;
}

:deep(.ep-form--label-top) .ep-form-item__label {
  padding: 0;
}
</style>
